<template>
  <div class="card-detail-layout">
    <div class="card-detail-top">
      <h2 class="card-detail-title">{{busResult.busDetail.alipayCard.title}}</h2>
      <h2 class="card-detail-item-title">
        <span class="detail-left-txt">{{busResult.busDetail.alipayCard.menuTxt}}</span>
        <span class="detail-right-txt" v-show="false">
          <Icon type="ios-list-outline"></Icon>{{busResult.busDetail.alipayCard.list}}
        </span>
      </h2>
      <div class="detail-bottom-left-close">
        <div class="checkbox">会员卡号</div>
      </div>
      <div class="detail-bottom-left-close">
        <div class="checkbox">使用记录</div>
      </div>
      <div class="detail-bottom-left-close">
        <div class="checkbox">开通线路</div>
      </div>
      <div class="detail-bottom-left-close">
        <div class="checkbox">使用帮助</div>
      </div>
      <!--<div class="detail-top-checkbox">
        <Checkbox
          v-for="(item,index) in alipayMenuList"
          :key="index"
          v-model="item.checked">
          <span>{{item.name}}</span>
        </Checkbox>
      </div>-->
      <div class="detail-add-menu" v-if="false">
        <Button type="ghost" @click='editAlipayMenu'>
          <Icon type="plus"></Icon>
          {{busResult.busDetail.alipayCard.addBtn}}
        </Button>
      </div>
      <div class="detail-top-look clearfix" v-show="false">
        <span class="detail-look-icon fl">
          <Icon type="clipboard"></Icon>
        </span>
        <span class="detail-look-txt fl">
          {{busResult.busDetail.alipayCard.look}}
          <Icon type="ios-arrow-right"></Icon>
          <Icon type="ios-arrow-right"></Icon>
        </span>
      </div>
    </div>
    <div class="card-detail-bottom">
      <h2 class="card-detail-title">{{busResult.busDetail.codeCard.title}}</h2>
      <div class="card-detail-bottom-content clearfix">
        <div class="detail-bottom-left fl">
          <h2 class="card-detail-item-title">
          <span class="detail-left-txt">
           {{busResult.busDetail.codeCard.menuTxt}}
          </span>
            <span class="detail-right-txt" v-show="false"><Icon
              type="ios-list-outline"></Icon>{{busResult.busDetail.codeCard.list}}</span>
          </h2>
          <div class="detail-bottom-left-close">
            <div class="checkbox">会员卡号</div>
          </div>
          <div class="detail-bottom-left-close">
            <div class="checkbox">使用记录</div>
          </div>
          <div class="detail-bottom-left-line">
            <div class="detail-bottom-left-close">
              <div class="checkbox">开通线路－需用户自行更新上传已开通线路名</div>
            </div>
            <div class="detail-bottom-left-txt">
              <p class="detail-bottom-line-txt">
                <span class="txt-left">1.下载模版excel文件</span>
                <span>2.填写更新文件后上传</span>
              </p>
              <a :href="getExcl" style="margin-right: 16px;">
                <Button type="ghost">下载模板</Button>
              </a>
              <div class="upFile">
                <Button type="ghost">上传文件</Button>
                <input type="file" class="ghost-file" @change="openLineFile" ref="linesUpload">
              </div>
              <div class="upload-img" v-if="upOpenLineFile !== null">{{busResult.openData.uping}}{{ upOpenLineFile.name}}
              </div>
            </div>
          </div>
          <div class="detail-bottom-left-help">
            <div class="checkbox">使用帮助</div>
            <div class="detail-bottom-left-txt">
              <p class="detail-bottom-help-txt">
                点击下方按钮查看编辑使用帮助
              </p>
              <Button type="ghost" @click="helpEdit">查看/编辑</Button>
            </div>
          </div>
          <div class="detail-bottom-left-close">
            <div class="checkbox">退卡申请</div>
          </div>
          <!--<div class="detail-edit-menu">
            <Checkbox
              v-for="(item,index) in codeMenuList"
              :key="index"
              v-model="item.checked"
              v-if="index!==0&&index!==1&&index!==2">
              <span>{{item.name}}</span>
            </Checkbox>
          </div>-->
          <div class="detail-add-menu" v-if="false">
            <Button type="ghost" @click='editCodeMenu'>
              <Icon type="plus"></Icon>
              {{busResult.busDetail.codeCard.addBtn}}
            </Button>
          </div>
        </div>
        <div class="detail-bottom-right fl">
          <h2 class="card-detail-item-title">2、卡详情页banner设置（若不配置则无需编辑）</h2>
          <div class="detail-bottom-right-txt">
            <p class="detail-bottom-banner-txt">banner图片</p>
            <p class="detail-bottom-size-txt">请点击下方按钮上传690X160格式图片</p>
            <div class="upFile">
              <Button type="ghost">上传</Button>
              <input type="file" class="ghost-file" @change="bannerImgFile" ref="bannerUpload">
            </div>
            <div class="upload-img" v-if="bannerImg !== null">{{busResult.openData.uping}}{{ bannerImg.name }}
              <img :src="bannerImgSrc" class="card-img-look">
            </div>
            <div class="upload-img" v-if="imgLookSrc !== ''">历史上传的图片：
              <img :src="imgLookSrc" class="card-img-look">
            </div>
            <div class="detail-bottom-img-link clearfix">
              <h2 class="detail-img-link-txt fl">图片点击跳转链接：</h2>
              <div class="detail-img-link-inp fl">
                <Input v-model="imgLink"></Input>
              </div>
            </div>
            <div class="detail-bottom-look clearfix" v-show="false">
              <span class="detail-look-icon fl">
                <Icon type="clipboard"></Icon>
              </span>
              <span class="detail-look-txt fl">
                {{busResult.busDetail.codeCard.look}}
                <Icon type="ios-arrow-right"></Icon>
                <Icon type="ios-arrow-right"></Icon>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bus-submit">
      <Button type="primary" @click="nextProgress">{{busResult.progressBtn}}</Button>
    </div>
    <!--自定义菜单弹框-->
    <!--菜单管理-->
    <Modal v-model="menuModal"
           title="菜单管理"
           @on-ok="createMenuList"
           :class="'menu-modal'"
           :mask-closable="false">
      <div class="menu-list">
        <div class="check-layout" v-for="(item,index) in menuList" :key="index">
          <Checkbox v-model="item.checked"><span>{{item.name}}</span></Checkbox>
          <div class="edit-content">
            <span class="edit" @click="editA(menuList,item.id)"><Icon type="edit"></Icon></span>
            <span class="delete" @click="deleteA(menuList,item.id)"><Icon type="ios-trash-outline"></Icon></span>
          </div>
        </div>
        <Button type="ghost" @click='addMenu' class="add-menu">
          <Icon type="plus"></Icon>
          添加菜单
        </Button>
      </div>
    </Modal>
    <!--菜单编辑-->
    <Modal v-model="editMenuModal"
           title="菜单编辑"
           @on-ok="editMenuList('editMenu')"
           :class="'edit-modal'"
           :mask-closable="false"
           :loading="loading">
      <Form ref="editMenu" :rules="editMenuRules" :model="editMenu" :label-width="106">
        <Form-item prop="name" label="菜单名称：">
          <Input v-model="editMenu.name" placeholder="请输入菜单名称"></Input>
        </Form-item>
        <Form-item prop="url" label="菜单链接：">
          <Input v-model="editMenu.url" placeholder="请输入菜单链接"></Input>
        </Form-item>
      </Form>
    </Modal>
    <!--卡详情菜单编辑-->
    <!--菜单管理-->
    <Modal v-model="codeModal"
           title="菜单管理"
           @on-ok="createCodeList"
           :class="'menu-modal'"
           :mask-closable="false">
      <div class="menu-list">
        <div class="check-layout" v-for="(item,index) in codeList" :key="index">
          <Checkbox v-model="item.checked" v-if="index!==0&&index!==1"><span>{{item.name}}</span></Checkbox>
          <div class="checkbox" v-if="index===0">退卡申请</div>
          <div class="checkbox" v-if="index===1">使用帮助</div>
          <div class="edit-content">
            <span class="edit" @click="editB(codeList,item.id)"><Icon type="edit"></Icon></span>
            <span class="delete" @click="deleteB(codeList,item.id)" v-if="index!==0&&index!==1&&index!==2"><Icon
              type="ios-trash-outline"></Icon></span>
          </div>
        </div>
        <Button type="ghost" @click='addCode' class="add-menu">
          <Icon type="plus"></Icon>
          添加菜单
        </Button>
      </div>
    </Modal>
    <!--菜单编辑-->
    <Modal v-model="editCodeModal"
           title="菜单编辑"
           @on-ok="editCodeList('codeMenu')"
           :class="'edit-modal'"
           :mask-closable="false"
           :loading="codeLoading">
      <Form ref="codeMenu" :rules="editCodeRules" :model="codeMenu" :label-width="106">
        <Form-item prop="name" label="菜单名称：">
          <Input v-model="codeMenu.name" placeholder="请输入菜单名称"></Input>
        </Form-item>
        <Form-item prop="url" label="菜单链接：">
          <Input v-model="codeMenu.url" placeholder="请输入菜单链接"></Input>
        </Form-item>
      </Form>
    </Modal>
    <!--使用帮助编辑-->
    <Modal v-model="helpTxt" title="使用帮助编辑" @on-ok="helpTxtList"
           :class="'protocol-modal'" :mask-closable="false">
      <div class="protocol-layout clearfix">
        <div class="progress-protocol-left fl">
          <div class="helpTxtList" v-for="(item,index) in helpquestions" :key="index">
            <div class="title">
              <span @click="deleteHelp(helpquestions,index)">
                问题：<Icon type="ios-trash-outline" class="icon"></Icon>
              </span>
              <Input v-model="item.question" type="textarea" placeholder="请输入问题"></Input>
            </div>
            <div class="answer">
              <span>解答：</span>
              <Input v-model="item.answer" type="textarea" :rows="4" placeholder="请输入解答"></Input>
            </div>
          </div>
          <Button type="ghost" class="add-helps" @click="addHelps">
            <Icon type="plus" class="plus"></Icon>
            添加使用帮助
          </Button>
        </div>
        <busHelps></busHelps>
      </div>
    </Modal>
    <!--添加使用帮助-->
    <Modal v-model="addHelpTxt" title="使用帮助编辑" @on-ok="addHelpTxtData('helps')" :class="'edit-modal'"
           :mask-closable="false"
           :loading="helpLoading">
      <Form ref="helps" :rules="helpsRules" :model="helps" :label-width="80">
        <Form-item prop="question" label="问题：">
          <Input v-model="helps.question" type="textarea" placeholder="请输入问题"></Input>
        </Form-item>
        <Form-item prop="answer" label="解答：">
          <Input v-model="helps.answer" type="textarea" :rows="4" placeholder="请输入解答"></Input>
        </Form-item>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions } from 'vuex'
  import busHelps from './son/busHelps.vue'

  export default {
    data () {
      return {
        dataId: JSON.parse(sessionStorage.getItem('dataId')),
        imgLink: '',
        // 支付宝菜单
        alipayMenuList: [
          {id: 0, name: '会员卡号', url: '#', checked: true},
          {id: 0, name: '使用记录', url: '#', checked: true},
          {id: 0, name: '开通线路', url: '#', checked: true},
          {id: 1, name: '使用帮助', url: '#', checked: true}
        ],
        // 菜单管理
        menuModal: false,
        menu: {},
        menuList: [],
        // 菜单编辑
        editMenuModal: false,
        editMenuRules: {
          name: [
            {required: true, message: '请输入菜单标题', trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入菜单链接', trigger: 'blur'}
          ]
        },
        loading: true,
        editMenu: {
          id: '',
          name: '',
          url: '',
          checked: ''
        },
        // 卡详情菜单
        codeMenuList: [
          {id: 0, name: '会员卡号', url: '#', checked: true},
          {id: 0, name: '使用记录', url: '#', checked: true},
          {id: 0, name: '开通线路', url: '#', checked: true},
          {id: 1, name: '使用帮助', url: '#', checked: true},
          {id: 1, name: '退卡申请', url: '#', checked: true}
        ],
        // 菜单管理
        codeModal: false,
        codeList: [],
        // 菜单编辑
        editCodeModal: false,
        editCodeRules: {
          name: [
            {required: true, message: '请输入菜单标题', trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入菜单链接', trigger: 'blur'}
          ]
        },
        codeLoading: true,
        codeMenu: {
          id: '',
          name: '',
          url: '',
          checked: ''
        },
        // 图片上传
        bannerImg: null,
        bannerImgSrc: '',
        imgLookSrc: '',
        // 使用帮助
        helpTxt: false,
        addHelpTxt: false,
        helpsRules: {
          question: [
            {required: true, message: '请输入问题', trigger: 'blur'}
          ],
          answer: [
            {required: true, message: '请输入解答', trigger: 'blur'}
          ]
        },
        helps: {
          question: '',
          answer: ''
        },
        helpLoading: true,
        // 开通线路数据
        openLinesFile: null,
        upOpenLineFile: null,
        getExcl: this.api.bus.getOpenLine + '?alipayClientId=' + this.dataId
      }
    },
    created () {
      // 第一步：获取用户配置信息
      let detailData = JSON.parse(sessionStorage.getItem('detailData'))
      if (detailData) {
        for (let i = 0; i < detailData.listConfigurationCardMeun.length; i++) {
          let obj = {
            id: i,
            name: detailData.listConfigurationCardMeun[i].cardMeunName,
            url: detailData.listConfigurationCardMeun[i].cardMeunUrl,
            checked: detailData.listConfigurationCardMeun[i].status === 'true'
          }
          this.alipayMenuList.push(obj)
        }
        this.codeMenuList = []
        for (let i = 0; i < detailData.configurationCardSettingList.length; i++) {
          let obj = {
            id: i,
            name: detailData.configurationCardSettingList[i].configurationCardSettingName,
            url: detailData.configurationCardSettingList[i].configurationCardSettingUrl,
            checked: detailData.configurationCardSettingList[i].status === 'true'
          }
          this.codeMenuList.push(obj)
        }
        this.imgLink = detailData.bannerImgUrl
        this.imgLookSrc = detailData.bannerUrl
        this.mutHelpquestions(JSON.parse(detailData.configurationCardHlepTxt))
      } else {
        this.getDetailData()
      }
      // 第二步：填写并校验信息
      // 1. 编辑菜单信息
      // 第三步：提交并保存信息
    },
    computed: {
      ...mapState('bus', ['busResult', 'helpquestions'])
    },
    components: {busHelps},
    methods: {
      ...mapMutations('bus', ['mutHelpquestions']),
      ...mapActions('bus', ['busSubmit']),
      getDetailData () {
        let url = this.api.bus.getMenu
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000' && res.data.data.listConfigurationCardMeun !== '无数据') {
            let detailData = res.data.data
            for (let i = 0; i < detailData.listConfigurationCardMeun.length; i++) {
              let obj = {
                id: i,
                name: detailData.listConfigurationCardMeun[i].cardMeunName,
                url: detailData.listConfigurationCardMeun[i].cardMeunUrl,
                checked: detailData.listConfigurationCardMeun[i].status === 'true'
              }
              this.alipayMenuList.push(obj)
            }
            this.codeMenuList = []
            for (let i = 0; i < detailData.configurationCardSettingList.length; i++) {
              let obj = {
                id: i,
                name: detailData.configurationCardSettingList[i].configurationCardSettingName,
                url: detailData.configurationCardSettingList[i].configurationCardSettingUrl,
                checked: detailData.configurationCardSettingList[i].status === 'true'
              }
              this.codeMenuList.push(obj)
            }
            this.imgLink = detailData.bannerImgUrl
            this.imgLookSrc = detailData.bannerUrl
            this.mutHelpquestions(JSON.parse(detailData.configurationCardHlepTxt))
            sessionStorage.setItem('detailData', JSON.stringify(detailData))
          } else {
            this.$Message.error({content: '请配置相关信息', duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      // 进入菜单编辑
      editAlipayMenu () {
        this.menuModal = true
        this.menuList = this.alipayMenuList
      },
      // 菜单管理
      createMenuList () {
      },
      editA (obj, id) {
        this.editMenuModal = true
        this.editMenu = {
          name: obj[id].name,
          url: obj[id].url,
          id: id,
          checked: obj[id].checked
        }
      },
      deleteA (obj, id) {
        let arr = []
        for (let i = 0; i < this.alipayMenuList.length; i++) {
          if (i !== id) {
            arr.push(this.alipayMenuList[i])
          }
        }
        for (let i = 0; i < arr.length; i++) {
          arr[i].id = i
        }
        this.menuList = arr
        this.alipayMenuList = arr
      },
      addMenu () {
        this.editMenuModal = true
        this.editMenu = {
          name: '',
          url: '',
          id: this.menuList.length,
          checked: false
        }
      },
      // 菜单编辑
      editMenuList (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交中。。。')
            this.alipayMenuList[this.editMenu.id] = this.editMenu
            setTimeout(() => {
              this.editMenuModal = false
            }, 500)
          } else {
            this.$Message.error('表单验证失败!')
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 1)
          }
        })
      },
      // 进入菜单编辑
      editCodeMenu () {
        this.codeModal = true
        this.codeList = this.codeMenuList
      },
      // 卡详情页菜单编辑
      // 菜单管理
      createCodeList () {
      },
      editB (obj, id) {
        this.editCodeModal = true
        this.codeMenu = {
          name: obj[id].name,
          url: obj[id].url,
          id: id,
          checked: obj[id].checked
        }
      },
      deleteB (obj, id) {
        let arr = []
        for (let i = 0; i < this.codeMenuList.length; i++) {
          if (i !== id) {
            arr.push(this.codeMenuList[i])
          }
        }
        for (let i = 0; i < arr.length; i++) {
          arr[i].id = i
        }
        this.codeList = arr
        this.codeMenuList = arr
      },
      addCode () {
        this.editCodeModal = true
        this.codeMenu = {
          name: '',
          url: '',
          id: this.codeList.length,
          checked: false
        }
      },
      // 菜单编辑
      editCodeList (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交中。。。')
            this.codeMenuList[this.codeMenu.id] = this.codeMenu
            setTimeout(() => {
              this.editCodeModal = false
            }, 500)
          } else {
            this.$Message.error('表单验证失败!')
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 1)
          }
        })
      },
      bannerImgFile () {
        let len = this.$refs.bannerUpload.files.length
        if (len === 1) {
          this.bannerImg = this.$refs.bannerUpload.files[0]
          var reader = new FileReader()
          reader.readAsDataURL(this.bannerImg)
          let that = this
          reader.onload = function () {
            that.bannerImgSrc = this.result
          }
        } else {
          this.bannerImg = null
        }
      },
      // 使用帮助数据
      helpEdit () {
        this.helpTxt = true
      },
      helpTxtList () {
      },
      addHelps () {
        this.addHelpTxt = true
      },
      addHelpTxtData (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交中。。。')
            this.helpquestions.push(this.helps)
            setTimeout(() => {
              this.helps = {
                question: '',
                answer: ''
              }
              this.addHelpTxt = false
            }, 500)
          } else {
            this.$Message.error('表单验证失败!')
            this.helpLoading = false
            setTimeout(() => {
              this.helpLoading = true
            }, 1)
          }
        })
      },
      deleteHelp (obj, index) {
        this.$Modal.confirm({
          title: '确认删除该问答？',
          content: '<p>你将删除该问答。</p>',
          loading: true,
          onOk: () => {
            setTimeout(() => {
              this.$Modal.remove()
              let arr = []
              for (let i = 0; i < obj.length; i++) {
                if (i !== index) {
                  arr.push(obj[i])
                }
              }
              this.mutHelpquestions(arr)
            }, 1000)
          }
        })
      },
      // 协议文件
      openLineFile () {
        let len = this.$refs.linesUpload.files.length
        if (len === 1) {
          this.openLinesFile = this.$refs.linesUpload.files[0]
          if (this.openLinesFile.name.indexOf('.xls') > 0 || this.openLinesFile.name.indexOf('.XLS') > 0) {
            this.upOpenLineFile = this.openLinesFile
          } else {
            this.$Message.error('请上传后缀名为.xlsx的模板文件!')
          }
        } else {
          this.bannerImg = null
        }
      },
      // 数据验证并提交
      nextProgress () {
        if (this.alipayMenuList.length === 0) {
          this.$Message.error('请编辑卡页面菜单')
        } else if (this.codeMenuList.length === 0) {
          this.$Message.error('请编辑卡详情菜单')
        } else if (this.helpquestions.length === 0) {
          this.$Message.error('请编辑使用帮助问答')
        } else if (this.upOpenLineFile === null) {
          this.$Message.error('请上传开通线路模板表格')
        } else if (this.bannerImg === null) {
          this.$Message.error('请上传banner图片')
        } else if (!this.imgLink) {
          this.$Message.error('请填写banner图片链接')
        } else {
          this.$Message.success('提交中。。。')
          let aliMenu = []
          for (let i = 0; i < this.alipayMenuList.length; i++) {
            let obj = {
              cardMeunName: this.alipayMenuList[i].name,
              cardMeunUrl: this.alipayMenuList[i].url,
              status: this.alipayMenuList[i].checked
            }
            aliMenu.push(obj)
          }
          let codeMenu = []
          for (let i = 0; i < this.codeMenuList.length; i++) {
            let obj = {
              configurationCardSettingName: this.codeMenuList[i].name,
              configurationCardSettingUrl: this.codeMenuList[i].url,
              status: this.codeMenuList[i].checked
            }
            codeMenu.push(obj)
          }
          let params = new FormData()
          params.append('files', this.bannerImg)
          params.append('alipayClientId', this.dataId)
          params.append('bannerImgUrl', this.imgLink)
          params.append('meunSetting', JSON.stringify(aliMenu))
          params.append('cardSetting', JSON.stringify(codeMenu))
          params.append('helpTxt', JSON.stringify(this.helpquestions))
          let excel = new FormData()
          excel.append('importExcel', this.upOpenLineFile)
          excel.append('alipayClientId', this.dataId)
          let obj = {
            params: params,
            mes: this.$Message,
            excel: excel
          }
          this.busSubmit(obj)
        }
      }
    }
  }
</script>
